<script setup>
import { ref } from 'vue'
import CardComponent from '@/components/CardComponent.vue'
import { AllOrders, orderState, orderCondition, orderChangeStatus } from '@/api/order'
import { LocalDateTime } from '@/utils/format'
const dateSelection = ref(0)
const totalNumber = ref(0)
const pagination = ref(null)
const currentPage = ref(1);
const options = [
  { label: '全部订单', value: 0 },
  { label: '待接单', value: 2 },
  { label: '待派送', value: 3 },
  { label: '派送中', value: 4 },
  { label: '已完成', value: 5 },
  { label: '已取消', value: 6 }
]
const handleDateChange = async (value) => {
  // console.log(pagination.value);
  currentPage.value = 1;
  dateSelection.value = value
  const { result } = await orderState(dateSelection.value, 1)
  orderList.value = result.records
  totalNumber.value = result.total

}
const searchForm = ref({
  number: '',
  phone: '',
  orderTime: [],
  pageNumber: 1,
})
const orderList = ref([])
const getAllOrdesList = async () => {
  const { result } = await AllOrders(1)
  orderList.value = result.records
  totalNumber.value = result.total
}
getAllOrdesList()
// 判断订单状态
const orderStatus = (status) => {
  switch (status) {
    case 0:
      return '全部订单'
    case 2:
      return '待接单'
    case 3:
      return '待派送'
    case 4:
      return '派送中'
    case 5:
      return '已完成'
    case 6:
      return '已取消'
    default:
      return '全部订单'
  }
}
// 按钮文字
const buttonText = (status) => {
  switch (status) {
    case 0:
      return '全部订单'
    case 2:
      return '接单'
    case 3:
      return '派送'
    case 4:
      return '完成'
    case 5:
      return '取消'
    case 6:
      return '已取消'
    default:
      return '全部订单'
  }
}
const onSubmit = async () => {
  if (searchForm.value.orderTime !== null && searchForm.value.orderTime.length === 2) {

    searchForm.value.startOrderTime = LocalDateTime(searchForm.value.orderTime[0])
    searchForm.value.endOrderTime = LocalDateTime(searchForm.value.orderTime[1])
  }
  searchForm.value.status = dateSelection.value
  // console.log(searchForm.value);
  const { result } = await orderCondition(searchForm.value)
  orderList.value = result.records
  totalNumber.value = result.total
  searchForm.value.startOrderTime = ''
  searchForm.value.endOrderTime = ''
}
const clearTime = () => {
  if ("startOrderTime" in searchForm.value || "endOrderTime" in searchForm.value) {
    searchForm.value.startOrderTime = ''
    searchForm.value.endOrderTime = ''
  }
}
const onChangeStatus = async (id, status) => {
  await orderChangeStatus(id, status + 1)
  const { result } = await orderState(dateSelection.value, 1)
  orderList.value = result.records
  totalNumber.value = result.total
}

const onChangedPage = async (currentPage) => {

  if (dateSelection.value === 0 && searchForm.value.number === '' && searchForm.value.phone === '' && searchForm.value.orderTime === '') {
    const { result } = await AllOrders(currentPage)
    orderList.value = result.records
    totalNumber.value = result.total
  } else if (searchForm.value.number !== '' || searchForm.value.phone !== '' || searchForm.value.orderTime !== '') {
    if (searchForm.value.orderTime !== null && searchForm.value.orderTime.length === 2) {

      searchForm.value.startOrderTime = LocalDateTime(searchForm.value.orderTime[0])
      searchForm.value.endOrderTime = LocalDateTime(searchForm.value.orderTime[1])
    }
    searchForm.value.status = dateSelection.value
    searchForm.value.pageNumber = currentPage
    // console.log(searchForm.value);
    const { result } = await orderCondition(searchForm.value)
    orderList.value = result.records
    totalNumber.value = result.total
    searchForm.value.startOrderTime = ''
    searchForm.value.endOrderTime = ''
  }
  else {
    const { result } = await orderState(dateSelection.value, currentPage)
    orderList.value = result.records
    totalNumber.value = result.total
  }

}
</script>

<template>
  <div><el-segmented v-model="dateSelection" :options="options" size="large" @change="handleDateChange" /></div>

  <div>
    <div style="margin-top: 20px">
      <CardComponent>
        <template #default>
          <div>
            <!-- 搜索表单 -->
            <el-form :inline="true" :model="searchForm">
              <el-form-item label="订单号:">
                <el-input v-model="searchForm.number" placeholder="请输入订单号"></el-input>
              </el-form-item>
              <el-form-item label="手机号:">
                <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="下单时间:">
                <el-date-picker @clear="clearTime" v-model="searchForm.orderTime" type="daterange"
                  placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="margin-top: 20px">
            <!-- 订单列表 -->
            <el-table :data="orderList">
              <el-table-column label="订单号" prop="number" width="200"></el-table-column>
              <el-table-column label="订单状态" width="100">
                <template #default="{ row }">
                  <span>{{ orderStatus(row.status) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户名" prop="consignee" width="100"></el-table-column>
              <el-table-column label="手机号" prop="phone" width="100"></el-table-column>
              <el-table-column label="地址" prop="address"></el-table-column>
              <el-table-column label="下单时间" prop="orderTime" width="100"></el-table-column>
              <el-table-column label="金额" width="70">
                <template #default="{ row }">
                  <span>￥{{ row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button type="primary" v-if="row.status !== 5 && row.status !== 6 && row.status !== 0"
                    @click="onChangeStatus(row.id, row.status)">{{
                      buttonText(row.status) }}</el-button>
                  <el-button type="danger" v-if="row.status !== 5 && row.status !== 6 && row.status !== 0"
                    @click="onChangeStatus(row.id, 5)">拒单</el-button>
                  <el-button type="success"
                    @click="$router.push(`/orderDetail?id=${row.id}&number=${row.number}`)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="currentPage" ref="pagination" layout="total,prev, pager, next"
              :total="totalNumber" @change="onChangedPage" />
          </div>
        </template>
      </CardComponent>
    </div>
  </div>
</template>
<style scoped>
:deep(.el-table__row .cell) {
  display: flex;
}

.el-pagination {
  justify-content: center;
}
</style>
